<template>
	
	<li>
		<div class="transform-tile">
			<div class="icon" @click="OnLiExpand">
				<CaretBottom v-show="isExpandForLiContent" />
				<CaretRight v-show="!isExpandForLiContent"/>
			</div>
			<div class="txt">文字设置</div>
			<div class="check"></div>
		</div>
		<div class="transform-content" v-show="isExpandForLiContent">
			<div class="c-row">
				<div class="t">文字内容:</div>
				<div class="input">
					  <el-input size="small"/>
				</div>
			</div>
			
			<div class="c-row">
				<div class="t">文字字体:</div>
				<div class="input">
				  <el-select v-model="value" placeholder="选择字体" size="small">
					<el-option
					  v-for="item in options"
					  :key="item.value"
					  :label="item.label"
					  :value="item.value"
					/>
				  </el-select>
				</div>
			</div>
			<div class="c-row">
				<div class="t">文字字号:</div>
				<div class="input">
					<el-input-number
					  :min="0"
					  :max="360"
					  v-model="Sca_y"
					  controls-position="right"
					  size="small"
					  @change="handleSca_Y"
					/>
				</div>
			</div>
			<div class="c-row">
				<div class="t">文字颜色:</div>
				<div class="input" style="width: 242px; margin-right: 5px;" >
					<el-input size="small" style="width: 242px; " />
				</div>
				<div class="color" >
					<el-color-picker v-model="color" show-alpha />
				</div>
			</div>
			<div class="c-row">
				<div class="t">背景颜色:</div>
				<div class="input" style="width: 242px; margin-right: 5px;" >
					<el-input size="small" style="width: 242px; " />
				</div>
				<div class="color" >
					<el-color-picker v-model="color" show-alpha />
				</div>
			</div>
			<div class="c-row">
				<div class="t">横向偏移:</div>
				<div class="input">
					  <el-input-number
					    :min="0"
					    :max="360"
					    v-model="Sca_y"
					    controls-position="right"
					    size="small"
					    @change="handleSca_Y"
					  />
				</div>
			</div>
			<div class="c-row">
				<div class="t">纵向偏移:</div>
				<div class="input">
					  <el-input-number
					    :min="0"
					    :max="360"
					    v-model="Sca_y"
					    controls-position="right"
					    size="small"
					    @change="handleSca_Y"
					  />
				</div>
			</div>
			
		</div>
	</li>
</template>

<script setup lang="ts">
	
	import {
	  CaretRight,CaretBottom,Unlock,Lock
	} from '@element-plus/icons-vue'
	import { ref } from 'vue'
	const isExpandForLiContent = ref(true)
	const isFixScale = ref(false)
	
	
	const Pos_x= ref(0.00)
	const Pos_y= ref(0)
	const Pos_z= ref(0)
	
	const Rota_x= ref(0)
	const Rota_y= ref(0)
	const Rota_z= ref(0)
	
	const Sca_x= ref(1)
	const Sca_y= ref(1)
	const Sca_z= ref(1)
	
	const handlePos_X = (value: number) => {
	  console.log(value)
	}
	const handlePos_Y = (value: number) => {
	  console.log(value)
	}
	const handlePos_Z = (value: number) => {
	  console.log(value)
	}
	const handleRota_X = (value: number) => {
	  console.log(value)
	}
	const handleRota_Y = (value: number) => {
	  console.log(value)
	}
	const handleRota_Z = (value: number) => {
	  console.log(value)
	}
	const handleSca_X = (value: number) => {
		if(isFixScale.value){
			Sca_x.value=value
			Sca_y.value=value
			Sca_z.value=value
		}
	}
	const handleSca_Y = (value: number) => {
	  if(isFixScale.value){
	  	Sca_x.value=value
	  	Sca_y.value=value
	  	Sca_z.value=value
	  }
	}
	const handleSca_Z = (value: number) => {
	  if(isFixScale.value){
	  	Sca_x.value=value
	  	Sca_y.value=value
	  	Sca_z.value=value
	  }
	}
	
	
	
	const OnFixScale=()=>{
		isFixScale.value=!isFixScale.value
	}
	
	const value = ref('')
	
	const options = [
	  {
	    value: 'Option1',
	    label: 'Option1',
	  },
	  {
	    value: 'Option2',
	    label: 'Option2',
	  },
	  {
	    value: 'Option3',
	    label: 'Option3',
	  },
	  {
	    value: 'Option4',
	    label: 'Option4',
	  },
	  {
	    value: 'Option5',
	    label: 'Option5',
	  },
	]
	
	const OnLiExpand=()=>{
		isExpandForLiContent.value=!isExpandForLiContent.value
	}
	
	const color = ref('rgba(19, 206, 102, 0.8)')

	
	defineExpose({
	});
	
</script>

<style  scoped>
	.transform-tile{
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		height: 1.875rem;
		height: 30px;
		border-width: 1px 0 0 0;
		border-style: solid;
		border-color: #4e505c;
		background-color: #37383c;
		line-height: 100%;
		width: 100%;
		padding-top: 6px;
		padding-left: 6px;
		width: 100%;
		font-size: 0.75rem;
		>.icon{
			width: 16px;
			height: 16px;
		}
		>.txt{
			flex: 1;
			margin-left: 0.375rem;
			padding-top: 3px;
		}
		>.check{
			width: 6.25rem;
		}
	}
	.transform-content{
		font-size: 0.75rem;
		flex: 1;
		height: 100%;
		width: 100%;
		margin-top: 5px;
		margin-bottom:5px;
		>.c-row{
			height: 30px;
			padding-top: 5px;
			>.t{
				float: left;
				margin-left: 0.3125rem;
				margin-right: 0.3125rem;
			}
			>.input{
				float: left;
				height: 24px;
				text-align: center;
				margin-top: -2px;
				padding-top: 2px;
				width: 17.125rem;
			}
			>.color{
				float: left;
				width: 2rem;
				height: 2rem;
			}
		}
	}
/deep/ .el-color-picker__trigger {
    height: 26px;
    width: 26px;
	    border: 1px solid #4d505d;
}	
	
/deep/ .el-select {
   width:  17.125rem;
}	
/deep/ .el-input-number--small {
	width:  17.125rem;
	line-height: 22px;
	height: 24.5px;
}

/deep/.el-select .el-input.is-focus .el-input__wrapper {
	box-shadow:none;
}

/deep/ .el-input-number.is-controls-right .el-input__wrapper {
	background: transparent;
	padding-left: 15px;
	padding-right: 42px;
	border-radius: 0px;
	color: #ccc;
}

/deep/ .el-input-number.is-controls-right .el-input-number__increase {
    border-radius: 0 ;
}
/deep/.el-input-number.is-controls-right .el-input-number__decrease {
    border-radius: 0;
}

/deep/ .el-input__inner {
    color: #ccc;
	outline-style: none ;
}

/deep/.el-input__wrapper {
    box-shadow: none;
	background-color: #272729;
	border: 1px solid #4d505d;
}

/deep/ .el-input-number__decrease, .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/ .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/.el-input-number__increase {
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
    border-radius: 0;
}

/deep/.el-input-number__decrease {
    border-radius: 0;
	border-top:1px solid #4d505d; 
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
}

/deep/ .el-input-number.is-controls-right .el-input-number__decrease {
  border-left:1px solid #4d505d; 
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
	border-bottom:1px solid#4d505d;
}

</style>